<template>
    <div class="aside-menu">
        <el-aside :width="sideWidth + 'px'" style="height: 100%">
            <el-menu
                 style="min-height: 100%; overflow-x: hidden;"
                 text-color="#000000"
                 active-text-color="#ffd04b"
                 :collapse-transition="false"
                 :collapse="isCollapse"
                 :unique-opened="true"
                 router
            >
                <div style="height: 60px; line-height: 60px; text-align: center">
                    <img src="../assets/-book-.png" alt=""
                         style="margin-left: 7px; width: 20px; position: relative; right: 5px; margin-bottom: -5px;"><b
                     style="color: white" v-show="logoTextShow">图书管理后台</b></div>
                
                <!-- 菜单遍历  -->
                <div v-for="item in menus" :key="item.id">
                    <div v-if="item.path">
                        <!-- 单独菜单   -->
                        <el-menu-item :index="item.path">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                    <div v-else>
                        <!-- 具有子导航的菜单  -->
                        <el-submenu :index="item.id + '' ">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span slot="title">{{ item.name }}</span></template>
                            <div v-for="subItem in item.children" :key="subItem.id">
                                <div v-if="subItem.path">
                                    <el-menu-item
                                         @click="changeBreadInfo(subItem.parentName, subItem.name, subItem.path)"
                                         :index="subItem.path">
                                        <i :class="subItem.icon"></i>
                                        <span slot="title">{{ subItem.name }}</span>
                                    </el-menu-item>
                                </div>
                            </div>
                        </el-submenu>
                    </div>
                </div>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>

export default {
    name: "Aside",
    props: {
        isCollapse: Boolean,
        logoTextShow: Boolean,
        sideWidth: Number,
        breadInfo: Object,
        tags: Array,
    },
    data() {
        return {
            menus: {},
        }
    },
    created() {
        let menusStr = sessionStorage.getItem("manage-menus") || "{}"
        this.menus = JSON.parse(menusStr)
    },
    methods: {
        //处理面包屑信息和面包屑下的标签信息
        changeBreadInfo (curTopMenuName, curMenuName, url) {
            //面包屑信息
            this.breadInfo.top = curTopMenuName
            this.breadInfo.sub = curMenuName
            
            //标签信息
            let flag = false//当前是否有此菜单信息(防止无限点击,无线生成)
            this.tags.map(item => {
                if (item.name === curMenuName) flag = true
            })
            if (!flag) {//不存在当前点击的菜单
                this.tags.push({
                    'name': curMenuName,
                    'url': url,
                    'highlight': true
                })
            } //高亮菜单tag
            this.changeHighlightTag(curMenuName)
        },
        changeHighlightTag(curMenuName) {
            this.$emit('changeHighlightTag', curMenuName); // 调用父界面的 收缩方法
        },
    },
}
</script>

<style scoped>
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
    display: none;
}

/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
    display: none;
}

.aside-menu >>> ul {
    background: url("../assets/home-bg2.jpeg") no-repeat;
}

/deep/.el-menu .el-menu-item:hover{
    outline: 0 !important;
    color: #2E95FB !important;
    background: linear-gradient(270deg, #d4711c 0%, #ba8f26 100%)!important;
}
/deep/.el-menu .el-menu-item.is-active {
    color: #2E95FB !important;
    background: linear-gradient(270deg, #2074c9 0%, #e55a5a 100%)!important;
}
.el-submenu /deep/.el-submenu__title:hover {
    color: #2E95FB !important;
    background: linear-gradient(270deg, #d56416 0%, #d24d19 100%)!important;
}

</style>
